<template>
  <div>
    <el-image :src="value"  style="background-color: rgb(245, 247, 250); width: 350px; height: 200px;">
      <span slot="error" style="width: 350px;height: 200px;vertical-align: middle;display: flex;justify-content: center;align-items: center;" @click="init">未签名</span>
      </el-image>    
    <el-dialog
    :title="mainTitle"
    :visible.sync="editVisible"
    :modal-append-to-body="false"
    width="840px"
    @closed="dlgClosed"
    :modal="false"
    :close-on-click-modal="false"
  >
    <div id="app">
      <div class="container">
        <div class="row">
          <div class="col-12 mt-2">
            <VueSignaturePad
              id="signature"
              width="95%"
              height="400px"
              ref="signaturePad"
              :options="options"
            />
          </div>
        </div>
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <el-button type="primary" plain @click="undo">撤销</el-button>
            </div>
          </el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple-light">
              <el-button type="success" plain @click="save">保存</el-button>
            </div>
          </el-col>
          <!-- <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-button type="warning" plain @click="change">换色</el-button>
            </div>
          </el-col> -->
          <el-col :span="4"
            ><div class="grid-content bg-purple-light">
              <el-button type="danger" plain @click="resume">重置</el-button>
            </div>
          </el-col>

          <el-col :span="4"
            ><div class="grid-content">
              <el-button type="danger" plain @click="dlgClosed">关闭</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    </el-dialog>
  </div>

</template>
<script>
export default {
  name:'custom-form-signature-pad',
  props: {
    value: {
      type: String,
      default: () => ('')
    }
  },
  data() {
    return {
      editVisible: false,
      mainTitle: "用户签名",
      options: {
        penColor: "#000",
      }
    };
  },
  created(){

  },
  methods: {

    init(id) {
      this.editVisible = true;
    },
    undo() {
      this.$refs.signaturePad.undoSignature();
    },
    save() {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
      if(!isEmpty){
        this.value = data
        this.$emit('input', data)
        this.dlgClosed()
      }
    },
    //切换颜色
    change() {
      if (this.options.penColor == "#00f") {
        this.options = {
          penColor: "#c0f",
        };
      } else {
        this.options = {
          penColor: "#00f",
        };
      }
    },
    //清除重置
    resume() {
      this.$refs.signaturePad.clearSignature()
    },
    //关闭
    dlgClosed() {
      this.editVisible = false
    },
  },
};
</script>
<style lang="scss" scoped>
#signature {
  border: double 3px transparent;
  border-radius: 2px;
  background-image: linear-gradient(white, white),
    radial-gradient(circle at top left, #4bc5e8, #9f6274);
  background-origin: border-box;
  background-clip: content-box, border-box;
  margin-bottom: 15px;
  margin-left: 19px;
}
</style>